<!-- 
    Security Knowledge Framework is an expert system application 
    that uses OWASP Application Security Verification Standard, code examples,
    helps developers in pre-development and post-development.  
    Copyright (C) 2020  Glenn ten Cate, Riccardo ten Cate

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as
    published by the Free Software Foundation, either version 3 of the
    License, or (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program. If not, see <http://www.gnu.org/licenses/>.
-->

<!-- **********************************************************************************************************************************************************
      MAIN CONTENT
      *********************************************************************************************************************************************************** -->
<!--main content start-->

<section id="main-content" class="page03 project-list">
  <section class="intro">
    <div class="inner">
      <div class="text">
        <h1>Manage Users</h1>
        <p>An overview of all the users that are registrated in the SKF application. Here we can manage these and activate or disable accounts.</p>
      </div>
    </div>
  </section>
  <section class="wrapper">
    <div class="row mt">
      <div class="col-lg-12">
        <div class="content-panel">
          <ngb-alert *ngIf="error" [dismissible]="false">
            <strong>Warning! </strong> {{error}}
          </ngb-alert>
          <ngb-alert *ngIf="!users" [dismissible]="false">
            <strong>Message, </strong> There are no users available to show yet!
          </ngb-alert>
          <table *ngIf="users" class="table table-striped table-advance table-hover">
            <thead>
              <tr>
                <th><i class="fa fa-user"></i> Username</th>
                <th><i class="fa fa-envelope-o"></i> User email</th>
                <th><i class="fa fa-lock"></i> User access</th>               
                <th><i class="fa fa-lock"></i> Modify access</th>               
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let user of users; let myIndex = index">
                <td style="color:#515594">{{user.username}}</td>
                <td>{{user.email}}</td>
                <td>{{user.access}}</td>
                <td>
                  <button (click)="open(granter)" id="grant-access{{myIndex}}" class="btn btn-success btn-xs">
                    <i>Grant</i>                 
                  </button>&nbsp;&nbsp;
                  <button (click)="open(revoker)" id="revoke-access{{myIndex}}" class="btn btn-danger btn-xs">
                    <i>Revoke</i>                 
                  </button>
                </td>
                <ng-template #revoker let-c="close" let-d="dismiss">
                  <div class="modal-header">
                    <h4 class="modal-title">Revoke user access</h4>
                    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
                    <span aria-hidden="true">&times;</span>
                   </button>
                  </div>
                  <div class="modal-body">
                    <p>Are you sure you want to revoke the access of this user?</p>
                    <p>To confirm, type <b style='color:red'> REVOKE </b> and click the revoke button</p>
                    <input type="text" [(ngModel)]="revoke_str" id="revoke" class="form-control">
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
                    <button type="button" class="btn btn-danger" id="submit" (click)="userRevokeAccess(user.id);c('Close click')">Revoke</button>
                  </div>
                </ng-template>
                <ng-template #granter let-c="close" let-d="dismiss">
                  <div class="modal-header">
                    <h4 class="modal-title">Grant user access</h4>
                    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
                    <span aria-hidden="true">&times;</span>
                   </button>
                  </div>
                  <div class="modal-body">
                    <p>Are you sure you want to grant this user access?</p>
                    <p>To confirm, type <b style='color:green'> GRANT </b> and click the grant button</p>
                    <input type="text" [(ngModel)]="grant_str" id="grant" class="form-control">
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
                    <button type="button" class="btn btn-success" (click)="userGrantAccess(user.id);c('Close click')">Grant</button>
                  </div>
                </ng-template>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <!-- /col-lg-4 -->
    </div>
    <!-- /row -->
  </section>
  <!--/wrapper -->
</section>
<!-- /MAIN CONTENT -->